<template>
  <div>
    <div class="memberCont navMarginTop allBackground" :style="{ height: screenHeightBg }">
      <div class="memberList">
        <div class="member">
          <div class="memberTitle">
            <img src="../../assets/chat/caogao.png" />
            建议反馈
          </div>
          <j-form-container :disabled="disabled">
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="反馈类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
                    <a-radio-group name="tenantStatus" v-model="model.type">
                      <a-radio value="故障">故障</a-radio>
                      <a-radio value="建议">建议</a-radio>
                      <a-radio value="投诉">投诉</a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="反馈内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content">
                    <a-textarea
                      :rows="5"
                      v-model="model.content"
                      placeholder="请输入反馈内容"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactInformation">
                    <a-input v-model="model.contactInformation" placeholder="请输入联系方式"></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </j-form-container>
          <div class="btnBoTm justify-between navMarginTop">
            <div class="sheCot" @click="generatedBtn" v-if="!disabled">立即提交</div>
            <div class="sheCot copy" v-else>
              正在提交中
              <div class="loading"></div>
            </div>
            <!-- <div class="sheCot copy">生成内容</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import PaymentPage from './component/PaymentPage' //支付二维码
import GlobalFooter from '@/components/page/GlobalFooter'
// import {VxeWebSocketMixins} from '@/mixins/WebsocketMixin'
export default {
  name: 'RecomMendation',
  // mixins: [VxeWebSocketMixins],
  components: {
    PaymentPage,
    GlobalFooter,
  },
  props: {},
  data() {
    return {
      themIndex: 1,
      payObj: {},
      redisInfo: [],
      screenWidth: '',
      screenHeight: '',
      screenHeightBg: '',
      goPaymentId: '',
      model: {
        type:'故障'
      },
      disabled: false,
      validatorRules: {
        content: [{ required: true, message: '请输入反馈内容' }],
        contactInformation: [{ required: true, message: '请输入联系方式' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
    }
  },
  created() {},
  mounted() {
    this.$nextTick(function () {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.screenHeightBg = this.screenHeight - 120 + 'px'
    })
  },
  methods: {
    generatedBtn(){
      // let obj = {
      //   type:this.model.type,
      //   content:this.model.content,
      //   contactInformation:this.model.contactInformation,
      // }
      const that = this;
      this.disabled = true
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.$http
            .post('/feedback/api/add', that.model)
            .then((res) => {
              console.log('res', res)
              that.disabled = false
              that.$message.success('提交成功')
              this.model.content = ''
              this.model.contactInformation = ''
            })
            .catch((error) => {
              console.log('error', error)
              that.disabled = false
              // 处理请求失败
            })
          }else{
            that.disabled = false
          }
         
        })
  
    },
    apiPackageRechargeL() {
      getAction('/feedback/api/list')
        .then((res) => {
          console.log('res', res)
          this.redisInfo = res.result.records
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.memberCont {
  .memberList {
    background: white;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
    height: 100%;
    .member {
      position: relative;
      margin-bottom: 20px;
      .memberTitle {
        font-size: 18px;
        color: #000;
        display: flex;
        align-items: center;
        font-weight: bold;
        margin-bottom: 20px;
        img {
          width: 27px;
          margin-right: 5px;
        }
      }
      .right {
        display: block;
        position: absolute;
        top: 2px;
        right: 0;
        width: 11px;
      }
    }
  }
}
.btnBoTm {
  width: 250px;
  margin: auto;
}
.sheCot {
  line-height: 20px;
  color: #fff;
  background: linear-gradient(90deg, #938bff, #ff97f2);
  border-color: #938bff;
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: all 0.3s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 8px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: auto;
  &:hover {
    opacity: 0.7;
  }
}
.recharge-package {
  width: 100%;
  float: left;
  margin-bottom: 10px;
  padding-top: 2px;
  .recharge-package-item {
    box-shadow: 0px 0px 0px 1px #e4e7ed;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 8px 16px;
    overflow: hidden;
    width: 220px;
    float: left;
    position: relative;
    .rounded {
      position: absolute;
      top: 0;
      left: 0;
      color: white;
      background: #ff3232;
      font-size: 13px;
      padding: 4px 10px;
      border-bottom-right-radius: 5px;
    }
    &.active {
      box-shadow: 0px 0px 0px 2px #333333;
    }
    .recharge-package-top {
      img {
        object-fit: cover;
        height: 131px;
        width: 100%;
      }
    }
    .recharge-package-bom {
      padding: 15px;
      .price-wrap {
        color: rgb(255, 50, 50);
        align-items: baseline;
        display: flex;
        .fix-pre {
          font-size: 14px;
        }
        .dd {
          font-weight: 500;
          font-size: 20px;
        }
      }
      .price-wrap-mid {
        font-weight: 500;
        font-size: 16px;
        color: #101010;
        margin-top: 6px;
      }
      .price-wrap-fot {
        margin-top: 10px;
        color: #999;
        font-size: 13px;
        margin-bottom: 4px;
      }
      .mt-auto {
        .text-sm {
          margin-top: 6px;
          display: flex;
          justify-content: space-between;
          font-size: 13px;
          color: #101010;
        }
      }
    }
  }
  .btnBoTm {
    float: left;
    width: 100%;
    margin-top: 20px;
    .sheCot {
      width: 200px;
      margin: auto;
    }
  }
}

/deep/.ant-form-item {
  margin-bottom: 5px;
  label {
    .ant-radio {
      display: none;
    }
    span {
      background: #f5f5f5;
      padding: 10px 16px;
      border-radius: 8px;
      float: left;
    }
    &.ant-radio-wrapper-checked {
      span {
        background: #ff97f2;
        color: white;
      }
    }
  }
}

.loading {
  width: 22px;
  height: 22px;
  border: 2px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotate 0.75s linear infinite;
  float: right;
  margin-left: 4px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

// .footer{
//     display: none;
//   }

@media screen and (max-width: 767px) {
  .recharge-package {
    column-gap: 0;
    column-count: 2;
    padding-bottom: 10px;
    .recharge-package-item {
      margin: 2%;
      width: 95%;
    }
  }

  .btnBoTm {
    width: 100%;
    padding: 0 4px;
    .sheCot {
      width: 100%;
      line-height: 10px;
      border-radius: 30px;
      font-size: 13px;
    }
  }
}
</style>